<template>
  <el-form :model="sellForm" :rules="sellRules" ref="loginForm">
    <el-row>
      <el-col style="margin-top: 20px">
        <el-card
          style="
            border-radius: 10px;
            background: -webkit-linear-gradient(bottom, #3600f921, #3600f974)
              no-repeat;
          "
        >
          <el-row
            style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-col span="5">
              <div
                style="
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                "
              >
                <button
                  class="el-icon-arrow-left"
                  @click="goback()"
                  style="
                    font-size: 40px;
                    padding: 0px;
                    font-weight: bold;
                    color: #ffffff;
                    background-color: Transparent;
                    border-width: 0px;
                  "
                ></button>
                <div style="font-size: 30px; font-weight: bold">卖出</div>
              </div>
            </el-col>
            <el-col span="19">
              <el-steps
                :active="active"
                finish-status="success"
                simple
                style=""
              >
                <el-step title="Step 1:输入卖出份额、选择到账方式"></el-step>
                <el-step title="Step 2:输入并验证支付密码"></el-step>
                <el-step title="Step 3:卖出完成"></el-step>
              </el-steps>
            </el-col>
          </el-row>
        </el-card>

        <el-row
          :gutter="40"
          style="margin-top: 20px; display: flex; align-items: stretch"
        >
          <el-col span="16">
            <el-card
              style="
                background: -webkit-linear-gradient(top, #bfefec, #f2f2f5)
                  no-repeat;
                border-radius: 10px;
              "
            >
              <div style="text-align: left; font-size: 25px; font-weight: bold">
                <span>卖出份额</span><span style="color: #999999"> | </span
                ><span style="font-size: 15px; color: #999999"
                  >份额*净值=金额</span
                >
              </div>

              <el-row style="display: flex; align-items: center">
                <el-col span="10" style="padding-top: 28px">
                  <el-form-item prop="transaction_amount">
                    <el-input
                      class="input1"
                      placeholder="请输入卖出的比例(%)"
                      v-model="sellForm.transaction_amount"
                      clearable
                      type="number"
                      min="0"
                      max="100"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col span="2">
                  <i style="font-size: 60px; font-weight: bold">%</i>
                </el-col>
                <el-col span="4">
                  <el-button
                    style="
                      border-radius: 10px;
                      color: #ffffff;
                      background-color: #39c5bb70;
                      border-width: 3px;
                      border-color: #39c5bb;
                      margin: 30px 0px;
                      padding: 0px;
                      width: 80%;
                      height: 50px;
                    "
                    @click="changeto4"
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <i
                        class="iconfont icon-renminbi"
                        style="font-size: 30px; font-weight: bold"
                      ></i>
                      <span style="font-size: 30px; font-weight: bold"
                        >1/4</span
                      >
                    </div>
                  </el-button>
                </el-col>
                <el-col span="4">
                  <el-button
                    style="
                      border-radius: 10px;
                      color: #ffffff;
                      background-color: #1e98d770;
                      border-width: 3px;
                      border-color: #1e98d7;
                      margin: 30px 0px;
                      padding: 0px;
                      width: 80%;
                      height: 50px;
                    "
                    @click="changeto2"
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <i
                        class="iconfont icon-renminbi"
                        style="font-size: 30px; font-weight: bold"
                      ></i>
                      <span style="font-size: 30px; font-weight: bold"
                        >1/2</span
                      >
                    </div>
                  </el-button>
                </el-col>
                <el-col span="4">
                  <el-button
                    style="
                      border-radius: 10px;
                      color: #ffffff;
                      background-color: #c5393e70;
                      border-width: 3px;
                      border-color: #c5393e;
                      margin: 30px 0px;
                      padding: 0px;
                      width: 80%;
                      height: 50px;
                    "
                    @click="changetoall"
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      <span style="font-size: 25px; font-weight: bold"
                        >全部份额</span
                      >
                    </div>
                  </el-button>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col span="12">
                  <el-card style="border-radius: 10px; text-align: left">
                    <el-row>
                      <span style="font-weight: bold">确认时间</span
                      >:现在卖出，预计<span style="color: #ff8b35"
                        >{{ new Date().getMonth() + 1 }}月{{
                          new Date().getDate() + 1
                        }}日24点前</span
                      >到账。
                    </el-row>
                    <el-row>
                      <span style="font-weight: bold">卖出费率</span
                      >:基金交易相关费用按照基金产品收费规则收取。
                    </el-row>
                  </el-card>
                  <el-card
                    style="
                      border-radius: 10px;
                      text-align: left;
                      margin-top: 20px;
                    "
                  >
                    <el-row>
                      您可通过截屏方式留存相关信息。本应用承诺以诚实守信、谨慎勤勉的原则提供投顾服务，但不保证投资者一定盈利,也不保证最低收益和投资本金不受损失。投顾服务的过往业绩并不预示其未来业绩表现。
                    </el-row>
                  </el-card>
                </el-col>
                <el-col span="12">
                  <el-card style="border-radius: 10px; text-align: left">
                    <el-row>
                      <span style="font-weight: bold; font-size: 20px"
                        >交易费用</span
                      >
                    </el-row>
                    <el-row style="margin-top: 14px">
                      本服务在申购基金时会产生基金交易费用，该费用遵循组合内每只基金的费率规则，详情请查看组合内单只基金在本平台的交易须知。
                      每只基金管理费、托管费、销售服务费将由基金公司从基金资产中每日计提，无需投资者在每笔交易中另行支付。运作费用详情信息请参考每只基金的招募说明书。组合内基金配比明细可在转入后通过"持仓详情"页面、开户报告和定期报告进行查看。
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col span="8">
            <el-card
              style="
                background: -webkit-linear-gradient(top, #bfd3ef, #f2f2f5)
                  no-repeat;
                border-radius: 10px;
                height: 100%;
              "
            >
              <div style="text-align: left; font-size: 25px; font-weight: bold">
                <span>到账方式</span>
              </div>
              <el-row
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin: 30px 0px;
                "
              >
                <el-col span="6">
                  <i
                    :class="icon1"
                    style="font-size: 60px; font-weight: bold"
                  ></i>
                </el-col>
                <el-col span="18">
                  <el-form-item prop="transaction_source">
                    <el-select
                      v-model="sellForm.transaction_source"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        label="余额"
                        :value="this.$route.query.user_id"
                      ></el-option>
                      <el-option
                        v-for="item in cards"
                        :key="item.card_number"
                        :label="item.card_bank"
                        :value="item.card_number"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="text-align: left; margin-top: 50px">
                <span
                  >点击确定即代表您已知悉该基金的产品概要和投资人权益须知等相关内容</span
                >
              </el-row>
              <el-row style="">
                <el-button
                  style="
                    border-radius: 10px;
                    color: #ffffff;
                    background-color: #1e98d770;
                    border-width: 3px;
                    border-color: #1e98d7;
                    margin: 30px 0px;
                    padding: 0px;
                    width: 60%;
                    height: 80px;
                  "
                  @click="sell()"
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span style="font-size: 30px; font-weight: bold">确认</span>
                  </div>
                </el-button>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <el-dialog
          title="请输入支付密码"
          :visible.sync="dialogVisible1"
          width="50%"
        >
          <el-row>
            <span style="font-size: 30px; font-weight: bold">{{
              sellForm.transaction_amount
            }}</span>
            <i style="font-size: 30px; font-weight: bold">%</i>
          </el-row>
          <el-row style="color: #e1e1e1">
            ____________________________________________________________
          </el-row>
          <el-row
            style="
              margin: 20px 30px;
              display: flex;
              justify-content: space-around;
              align-items: center;
            "
          >
            <el-col span="8" style="text-align: left; font-size: 20px"
              >当前到账方式：</el-col
            >
            <el-col span="2" style="text-align: right">
              <i :class="icon1" style="font-size: 30px; font-weight: bold"></i>
            </el-col>
            <el-col span="14" style="text-align: left; font-size: 20px">
              {{ label }}
            </el-col>
          </el-row>
          <el-row>
            <el-input
              placeholder="请输入密码"
              v-model="sellForm.sell_password"
              show-password
              clearable
              style="padding: 0px 50px; width: 80%"
            ></el-input>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sellVerify()">确认支付</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible2" width="30%">
          <el-result icon="success" title="转出成功">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="complete()"
                >返回</el-button
              >
            </template>
          </el-result>
        </el-dialog>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getAllCardAPI } from "@/api/getAllCardsAPI";
import { sellVerify } from "@/api/sellVerify.js";

export default {
  methods: {
    //返回上一级页面
    goback() {
      this.$router.back();
    },
    //快捷更改金额为500
    changeto4() {
      this.sellForm.transaction_amount = 25;
    },
    //快捷更改金额为1000
    changeto2() {
      this.sellForm.transaction_amount = 50;
    },
    //快捷更改金额为2000
    changetoall() {
      this.sellForm.transaction_amount = 100;
    },
    //打开密码验证
    sell() {
      if (
        this.sellForm.transaction_amount < 0 ||
        this.sellForm.transaction_amount > 100 ||
        this.sellForm.transaction_amount == ""
      ) {
        this.$message.error("卖出份额比例只能在0-100%之间");
      } else {
        this.dialogVisible1 = true;
        this.active = 1;
      }
    },
    //完成密码验证，打开反馈界面
    async sellVerify() {
      console.log("发送sellVerify请求");
      const { data: res } = await sellVerify(this.$qs.stringify(this.sellForm)
      );
      if (res.flag) {
        this.$message.success('支付成功！')
        this.dialogVisible1 = false;
        this.dialogVisible2 = true;
        this.active = 2;
       
      } else {
        this.$message.error(res.data);
      }
    },
    //关闭反馈界面
    complete() {
      this.dialogVisible2 = false;
      this.active = 3;
       this.$router.push({
          path:'purchase',
          query:{
            user_id:this.$route.query.user_id
          }
        })
    },

    async getAllCards() {
      console.log("发送getAllCards请求");
      const { data: res } = await getAllCardAPI(this.$route.query.user_id);
      if (res.flag) {
        var list = this.$jsonToObj(res);
        this.cards = list;
      }
    },
  },
  created() {
    // 发axios请求最早的时候，调用普通函数来发请求
    // this.onSubmit();
    // this.testpost();
    // this.getUser();
    this.getAllCards();
  },
  data() {
    return {
      sellForm: {
        //操作类型：转入/转出
        operate_type: "sell",
        //调整卖出的百分比
        transaction_amount: 0,
        //来源/去向
        transaction_source: this.$route.query.user_id,
        //用户id
        user_id: this.$route.query.user_id,
        //支付密码验证处的输入值
        sell_password: "",
      },
      sellRules: {
        transaction_amount: [
          { required: true, message: "请选择卖出的份额", trigger: "blur" },
        ],
        transaction_source: [
          { required: true, message: "请选择到账方式", trigger: "blur" },
        ],
        sell_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
      //当前步骤位置
      active: 0,
      //密码验证界面的可见性
      dialogVisible1: false,
      //反馈界面的可见性
      dialogVisible2: false,
      //到账方式的选项
      cards: [],
      //到账方式选择框的值
      label: "余额",
      //到账方式选择框的图标
      icon1: "el-icon-money",
    };
  },
  watch: {
    "sellForm.transaction_source"(newVal, oldVal) {
      // 监听 num 属性的数据变化
      // 作用 : 只要 num 的值发生变化,这个方法就会被调用
      // 第一个参数 : 新值
      // 第二个参数 : 旧值,之前的值

      if (newVal == this.$route.query.user_id) {
        this.icon1 = "el-icon-money";
        this.label = "余额";
      } else {
        this.icon1 = "el-icon-bank-card";
        for (var i = 0; i < this.cards.length; i++) {
          if (newVal == this.cards[i].card_number) {
            this.label = this.cards[i].card_bank + this.cards[i].card_number;
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.el-input.input1 >>> .el-input__inner {
  font-size: 30px;
}
</style>
